<template>
  <view class="sinyu-evaluation">
<!--    <view class="evaluation-tags">
      <view class="tags-item" v-for="(item,idx) in 10" :key="idx">大夫赞</view>
    </view> -->
    <view class="evaluation-list">
      <view class="list-item" v-for="(item,idx) in list" :key="idx">
        <view class="item-header">
          <view class="header-title">
            <image :src="item.avatar" mode="aspectFill" class="img"></image>
            {{item.nickName}}
            <view class="header-date">{{item.time}}</view>
          </view>
          <view class="box-flex">
            <uni-rate :value="item.score" size="14"></uni-rate>
            {{item.score}}
            <view class="span">{{item.source}}</view>
          </view>
        </view>
        <view class="item-main">
          <view class="main-intro dot3" v-html="item.content"></view>
          <view class="main-imgs not-bar">
            <image :src="img" mode="aspectFill" class="imgs-img" v-for="(img,idx) in item.imgList" :key="idx" @click="handlePreview(item.imgList,idx)"></image>
          </view>
        </view>
        <view class="item-doctor" v-if="item.doctorList">
          <image class="img" :src="item.doctorList[0].avatar" mode="aspectFill"></image>
          <view class="doctor-info">
            <h2>{{item.doctorList[0].realName}} <span>{{item.doctorList[0].jobTitle}}</span></h2>
            <view class="info-p">{{item.doctorList[0].workYear}}年从业经验 <span style="color: #B0B0B0; font-size: 22rpx;margin: 0 8rpx">|</span> 100%好评</view>
          </view>
          <uni-icons type="right" size="14" color="#b0b0b0"></uni-icons>
        </view>
      </view>
    </view>
    <view class="more" @click="$emit('onMore')" v-if="hasMore">查看全部评价 <uni-icons type="right" style="margin-left: 4rpx;" size="14" color="#B0B0B0"></uni-icons> </view>
  </view>
</template>

<script>
  export default {
    name:"SinyuEvaluation",
    props:{
      list:{
        type:Array,
        require:true
      },
      hasMore:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        
      };
    },
    methods:{
      handlePreview(list,idx){
        uni.previewImage({
          urls:list,
          current:idx
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .sinyu-evaluation{
    .evaluation-tags{
      display: flex;
      flex-wrap: wrap;
      .tags-item{
        line-height: 1;
        padding: 14rpx 16rpx;
        margin-right: 12rpx;
        background: var(--theme-color-10);
        color: var(--theme-color);
        font-size: 22rpx;
        margin-bottom: 12rpx;
      }
    }
    .evaluation-list{
      padding: 12rpx 0 0;
      .list-item{
        .item-header{
          .header-title{
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: var(--title-color);
            font-weight: bold;
            margin-bottom: 8rpx;
            .img{
              width: 52rpx;
              height: 52rpx;
              border-radius: 50%;
              margin-right: 8rpx;
            }
            .header-date{
              font-size: 20rpx;
              color: var(--sub-title);
              font-weight: 400;
              margin-left: auto;
            }
          }
          .box-flex{
            color: var(--sub-theme);
            font-size: 20rpx;
            font-weight: 400;
            margin-left: auto;
            .span{
              margin-left: 22rpx;
            }
          }
        }  // item-header end
        .item-main{
          padding: 24rpx 0;
          .main-intro{
            line-height: 36rpx;
            color: var(--title-color);
            font-size: 24rpx;
          }
          .main-imgs{
            display: flex;
            flex-wrap: nowrap;
            margin-top: 20rpx;
            .imgs-img{
              width: 226rpx;
              height: 154rpx;
              border-radius: 12rpx;
              margin-right: 12rpx;
            }
          }
        }
        .item-doctor{
          padding: 20rpx;
          margin: 20rpx 0;
          border-radius: 20rpx;
          background: var(--page-bg);
          display: flex;
          align-items: center;
          .img{
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
          }
          .doctor-info{
            margin-left: 20rpx;
            margin-right: auto;
            h2{
              font-size: 28rpx;
              color: var(--title-color);
              font-weight: bold;
              span{
                line-height: 1;
                font-weight: 400;
                font-size: 18rpx;
                padding: 4rpx 8rpx;
                color: var(--theme-color);
                border-radius: 8rpx;
                margin-left: 6rpx;
                border: 2rpx solid var(--theme-color);
              }
            }
            .info-p{
              font-size: 22rpx;
              font-weight: bold;
              margin: 18rpx 0 16rpx;
              color: var(--title-color);
            }
          }
        }
      }  //  list-item end
    }  // evaluation-list end
    
    .more{
      line-height: 40rpx;
      font-size: 22rpx;
      color: #6D6D6D;
      text-align: center;
    }
  }  /// sinyu-evaluation end
</style>